<template>
  <div class="header">
    <div class="flex">
      <a-form layout="inline" class="form">
        <a-form-item label="状态">
          <a-select v-model:value="search.status" style="width: 120px;">
            <a-select-option :value="option.value" v-for="option in statusList" :key="option.value">{{ option.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getTableData">查询</a-button>
          <a-button @click="onReset" class="btn">重置</a-button>
          <a-button type="success" class="btn" @click="onExport">导出</a-button>
        </a-form-item>
      </a-form>
      <a-button type="primary" @click="onAddModal">新增banner</a-button>
    </div>
  </div>
  <TablePage 
    :dataSource="dataSource"
    :columns="columns" 
    :paginationData="paginationData"
    @change="pageChange"
    @showSizeChange="showSizeChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'createTime'">
        {{proxy.$filters.formatDate(record.createTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'actions'">
        <a type="link" @click="onEditModal(record)">编辑</a>
        <a type="link" style="margin-left: 10px;" @click="onStatus(record)">{{record.status === 1 ? '停用':'启用'}}</a>
      </template>
    </template>
  </TablePage>
  <BasicModal @register="register">
    <a-form
      :model="formState"
      ref="formRef"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 21 }"
    >
      <a-form-item label="Banner ID" v-if="formState.id">
        {{ formState.id }}   <span style="padding-left: 36px;">当前状态（{{formState.statusDes}}）</span>
      </a-form-item>
      <a-form-item label="主题">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="Banner图片">
        <UploadImage v-model:fileList="formState.imgs" />
      </a-form-item>
      <a-form-item label="链接">
        <a-input v-model:value="formState.linkUrl" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button type="primary" @click="onSubmit">保存</a-button>
      <a-button @click="() => {actionDialog(false)}">取消</a-button>
    </template>
  </BasicModal>
</template>

<script setup>
import UploadImage from '@/components/UploadImage/index.vue'
import TablePage from "@/components/TablePage/index.vue"
import { usePagination } from "@/useHooks/usePagination"
import BasicModal from '@/components/Modal/BasicModal.vue';
import { useModal } from "@/components/Modal/useModal";
import { bannerList,bannerStatus,bannerEdit } from '@/api/other';
import { downloadFile } from '@/utils/index'
import { reactive, ref, watch, onMounted, computed } from 'vue'
import { getCurrentInstance } from 'vue'
import { message } from 'ant-design-vue';
const { proxy } = getCurrentInstance()
const [register, { actionDialog, setProps }] = useModal({
  title: "",
  width: 800
});
const statusList = ref([
  {label: '全部',value: null},
  { label: '有效', value: 1 },
  { label: '无效', value: -1 },
])
const formState = reactive({
  id: undefined,
  linkUrl: undefined,
  statusDes: undefined,
  imgs: [],
  title: undefined,
})
onMounted(() => {
  getTableData()
})
const dataSource= ref([])
const columns = computed(() => {
  const arr = [
    {
      title: 'Banner ID',
      dataIndex: 'id',
      width: 120
    },
    {
      title: '主题',
      dataIndex: 'title',
      width: 160
    },
    {
      title: '链接',
      dataIndex: 'linkUrl',
      width: 180
    },
    {
      title: '创建人',
      dataIndex: 'createrName',
      width: 120
    },
    {
      title: '添加时间',
      dataIndex: 'createTime',
      width: 140
    },
    {
      title: '状态',
      dataIndex: 'statusDes',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 180,
      fixed: 'right'
    }
  ]
  return arr;
})
const search = reactive({
  status: null,
})
const onReset = () => {
  search.status = null
  getTableData()
}
const { paginationData, pageChange, showSizeChange } = usePagination()
watch(paginationData, () => {
  getTableData()
})
const getTableData = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  bannerList(req).then((res) => {
    paginationData.total = res.data.total
    dataSource.value = res.data.list.map(item => ({
      ...item,
      statusDes: statusList.value.find(i => i.value === item.status).label,
    }))
  })
}
const onExport = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  downloadFile('/banner/list/export',req)
}
const onAddModal = () => {
  formState.id = undefined
  formState.linkUrl = undefined
  formState.title= undefined
  formState.imgs= []
  formState.statusDes= undefined
  actionDialog()
  setProps({title:"新增Banner"})
}
const onEditModal = (record) => {
  formState.id = record.id
  formState.statusDes = record.statusDes
  formState.linkUrl= record.linkUrl
  formState.imgs= record.img ? [{uid:record.img, url: record.img, status: 'done'}] : []
  formState.title= record.title
  actionDialog()
  setProps({title: '编辑Banner'})
}
const onSubmit = () => {
  const req = { ...formState, img: formState.imgs.length > 0 ? formState.imgs[0].url : '' }
  delete req.imgs
  delete req.statusDes
  bannerEdit(req).then(() => {
    message.success('提交成功')
    actionDialog(false)
    getTableData()
  })
}
const onStatus = (record) => {
  bannerStatus({
    id: record.id,
    status: record.status === 1 ? -1 : 1
  }).then(() => {
    message.success('提交成功')
    getTableData()
  })
}
</script>